<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Language" content="zh-CN">
	<title>修改个人信息 - 智能选课系统</title>

	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, sans-serif;
		}

		body {
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			padding: 20px;
			min-height: 100vh;
			color: #333;
		}

		.update-container {
			max-width: 700px;
			margin: 30px auto;
			background: white;
			border-radius: 12px;
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
			overflow: hidden;
		}
		
		.back-btn {
			display: block;
			text-align: center;
			margin-top: 25px;
		}

		.back-btn a {
			display: inline-block;
			padding: 10px 20px;
			background: linear-gradient(135deg, #95a5a6, #7f8c8d);
			color: white;
			border-radius: 5px;
			text-decoration: none;
			transition: all 0.3s ease;
		}

		.back-btn a:hover {
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			text-decoration: none;
			color: white;
		}
		
		.update-header {
			background: linear-gradient(135deg, #667eea, #764ba2);
			color: white;
			padding: 20px;
			text-align: center;
		}

		.update-header h2 {
			margin: 0;
			font-weight: 600;
			font-size: 24px;
		}

		.update-body {
			padding: 30px;
		}

		.form-table {
			width: 100%;
			border-collapse: collapse;
		}

		.form-table tr {
			border-bottom: 1px solid #eaeaea;
		}

		.form-table td {
			padding: 16px 15px;
			vertical-align: top;
		}

		.form-table td:first-child {
			font-weight: 600;
			color: #2c3e50;
			width: 30%;
			text-align: right;
			padding-right: 20px;
		}

		.form-input {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ddd;
			border-radius: 6px;
			font-size: 16px;
			transition: all 0.3s;
		}

		.form-input:focus {
			border-color: #667eea;
			outline: none;
			box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
		}

		.radio-group {
			display: flex;
			gap: 20px;
			margin-top: 8px;
		}

		.radio-option {
			display: flex;
			align-items: center;
			gap: 8px;
			font-weight: normal;
		}

		.submit-btn {
			background: linear-gradient(135deg, #27ae60, #2ecc71);
			color: white;
			border: none;
			padding: 14px 30px;
			border-radius: 6px;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s;
			display: block;
			margin: 25px auto 0;
			min-width: 160px;
		}

		.submit-btn:hover {
			background: linear-gradient(135deg, #2ecc71, #27ae60);
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
		}

		.error {
			color: #e74c3c;
			font-size: 14px;
			margin-top: 6px;
			display: block;
		}

		.readonly-field {
			background: #f8f9fa;
			color: #6c757d;
			cursor: not-allowed;
		}

		@media (max-width: 768px) {
			.update-container {
				margin: 15px;
				width: auto;
			}

			.update-body {
				padding: 20px 15px;
			}

			.form-table td {
				display: block;
				width: 100%;
				padding: 12px 10px;
				text-align: left;
			}

			.form-table td:first-child {
				padding-bottom: 5px;
				border-bottom: 1px dashed #eaeaea;
				margin-bottom: 5px;
				text-align: left;
				width: 100%;
			}

			.radio-group {
				flex-direction: column;
				gap: 10px;
			}
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function() {
			$("#myform").validate({
				rules: {
					username: "required",
					age: {
						required: true,
						digits: true
					},
					collage: "required",
					department: "required",
					password: "required",
					password_2: {
						required: true,
						equalTo: "#password"
					}
				},
				messages: {
					username: {
						required: "请输入姓名",
					},
					age: {
						required: "请输入年龄",
						digits: "只能输入数字",
					},
					collage: {
						required: "请输入所在学院",
					},
					department: {
						required: "请输入所在专业",
					},
					password: {
						required: "请输入密码",
					},
					password_2: {
						required: "请确认密码",
						equalTo: "两次密码输入不一致",
					}
				},
				errorElement: "span",
				errorClass: "error",
				highlight: function(element) {
					$(element).css('border-color', '#e74c3c');
				},
				unhighlight: function(element) {
					$(element).css('border-color', '#ddd');
				}
			});
		});
		
		function goBack() {
			// 尝试使用 history.back()，如果失败则返回学生主页
			if (window.history.length > 1) {
				window.history.back();
			} else {
				window.location.href = '${pageContext.request.contextPath}/jsp/student/s/S_Home.jsp';
			}
		}
	</script>
</head>
<body>
<div class="update-container">
	<div class="update-header">
		<h2>修改个人信息</h2>
	</div>

	<div class="update-body">
		<form action="${pageContext.request.contextPath}/UpdateStudentInfo_Servlet" method="post" id="myform">
			<table class="form-table">
				<tr>
					<td>身份：</td>
					<td>
						<input type="text" class="form-input readonly-field" value="学生" readonly>
					</td>
				</tr>
				<tr>
					<td>学号：</td>
					<td>
						<input type="text" class="form-input readonly-field" value="${s.getNo()}" readonly>
					</td>
				</tr>
				<tr>
					<td>姓名：</td>
					<td>
						<input type="text" name="username" id="username" class="form-input" value="${s.getName()}"/>
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<div class="radio-group">
							<label class="radio-option">
								<input type="radio" name="sex" value='男' ${s.getSex() == '男' ? 'checked' : ''}> 男
							</label>
							<label class="radio-option">
								<input type="radio" name="sex" value='女' ${s.getSex() == '女' ? 'checked' : ''}> 女
							</label>
						</div>
					</td>
				</tr>
				<tr>
					<td>年龄：</td>
					<td>
						<input type="text" name="age" id="age" class="form-input" value="${s.getAge()}"/>
					</td>
				</tr>
				<tr>
					<td>学院：</td>
					<td>
						<input type="text" name="collage" id="collage" class="form-input" value="${s.getCollage()}"/>
					</td>
				</tr>
				<tr>
					<td>专业：</td>
					<td>
						<input type="text" name="department" id="department" class="form-input" value="${s.getDepartment()}"/>
					</td>
				</tr>
				<tr>
					<td>新密码：</td>
					<td>
						<input id="password" name="password" type="password" class="form-input">
					</td>
				</tr>
				<tr>
					<td>确认密码：</td>
					<td>
						<input type="password" name="password_2" id="password_2" class="form-input"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" style="text-align: center; border: none;">
						<input type="submit" value="确认修改" class="submit-btn">
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="back-btn">
		<a href="javascript:history.back()"><i class="fas fa-arrow-left"></i> 返回</a>
	</div>
</div>
</body>
</html>